<template>
	<view class="viewBg">
		<!-- 选择开始日期 -->
		<view class="selectDate">
			<image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="dateStart" :start="startDate" :end="endDate" @change="bindStartDateChange">
					<view class="uni-input">{{dateStart}}</view>
				</picker>
			</view>
		</view>
		<view class="lineH1"></view>
		<!-- 选择结束日期 -->
		<view class="selectDate" @click="onShowDatePicker2">
			<image src="../../../static/img/calendar.png" mode="scaleToFill" style="width: 45upx;height: 45upx;"></image>
			<view class="uni-list-cell-db">
				<picker mode="date" :value="dateEnd" :start="startDate" :end="endDate" @change="bindEndDateChange">
					<view class="uni-input">{{dateEnd}}</view>
				</picker>
			</view>
		</view>
		<view class="lineH1"></view>
		<view class="checkBox">
			<axb-check-box ref="radio3" :list="sartTime" @change="radioChangeType"></axb-check-box>
		</view>
		<view class="lineH1"></view>
		<!-- 列表 -->
		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,index) in list" :key="index">
				<view class="uni-list-cell-navigate uni-navigate-right" @click="showPicker(index)">
					<text class="cell-text">{{item.title}}</text>
					<text class="cell-detail">{{item.selectedLabel}}</text>
				</view>
			</view>
		</view>
		<button type="primary" @click="getEventList">搜索</button>

		<view class="lineH20"></view>
		<!-- 列表 -->
		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,index) in eventList" :key="index">
				<view class="uni-list-cell-navigate">
					<view class="">{{item.questionTypeName}}</view>
					<view class="">提报{{item.tb}}件 | 办结{{item.bj}}件</view>
				</view>
			</view>
		</view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import mpvuePicker from "@/components/mpvue-picker/mpvuePicker.vue"
	import axbCheckBox from "@/components/axb-checkbox/axb-checkbox.vue"
	import {today,yesterday,week,month} from '../../../common/date-utils.js'
	export default {

		components: {
			mpvuePicker,
			axbCheckBox,
			today,
			yesterday,
			week,
			month,
		},

		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				dateStart: currentDate,
				dateEnd: currentDate,
				sartTime:[{
					name:'本月',
					value:'month',
					checked:0
				},{
					name:'本周',
					value:'week',
					checked:0
				},{
					name:'今天',
					value:'today',
					checked:0
				},{
					name:'昨天',
					value:'yesterday',
					checked:0
				},{
					name:'全部',
					value:'total',
					checked:0
				}],
				list: [{
						title: "事件类型",
						value: [{
							label: "请选择",
							value: ''
						}, {
							label: "企业事件",
							value: 1
						}, {
							label: "普通事件",
							value: 2
						}, {
							label: "应急事件",
							value: 3
						}],
						selectedLabel: "请选择",
						selectedValue: "0"
					},
					// {title:"企业",value:null,selectedLabel:"请选择",selectedValue:"0"},
					{
						title: "任务类型",
						value: null,
						selectedLabel: "请选择",
						selectedValue: "0"
					},
					{
						title: "涉事对象",
						value: null,
						selectedLabel: "请选择",
						selectedValue: "0"
					},
					{
						title: "问题类型",
						value: null,
						selectedLabel: "请选择",
						selectedValue: "0"
					}
				],

				themeColor: '#007AFF',
				pickerValueDefault: [0],
				mode: '',
				pickerValueArray: [],
				selectIndex: '',

				eventList: [],
				userId: '',
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad(user) {
			this.userId = user.userId;
		},
		methods: {
			showPicker(index) {
				let type = "";
				let id = '';
				let targetstype = '';
				if (this.list[index].title == "任务类型") {
					type = "task_type";
				} else if (this.list[index].title == "涉事对象") {
					type = "targets_type";
				}
				if (type.length > 0 && !this.list[index].value) {
					this.$http.get("ac/xagrid/appDictService/getDictItems", {
						type: type
					}).then((res) => {
						this.list[index].value = res.data;
						this.list[index].value.unshift({ label: '请选择', value: '' })
						this.pickerValueArray = this.list[index].value;
						this.$refs.mpvuePicker.show();
					})
				} else { //获取企业列表
					if (this.list[index].title == '企业' && !this.list[index].value) {
						this.$http.get('ac/xagrid/appCompanyService/getCompanyItems', {}).then((res) => {
							this.list[index].value = res.data;
							this.list[index].value.unshift({ label: '请选择', value: '' })
							this.pickerValueArray = this.list[index].value;
							this.$refs.mpvuePicker.show();
						});
					} else if (this.list[index].title == '问题类型' && !this.list[index].value) {
						let self = this;
						id = self.list[2].selectedValue;
						targetstype = self.list[2].selectedValue;
						console.log('非企业事件:' + id + '///' + targetstype);
						if (targetstype == '0') {
							uni.showModal({
								title: '提示',
								content: '请选择涉事对象',
								showCancel: false
							});
						} else {
							//获取涉事对象问题类型
							this.$http.post('as/xagrid/appdict/childrenList', { id: parseInt(id) }).then(res => {
								if (res.data.length == 0) {
									uni.showModal({
										title: '提示',
										content: '没有可选择的问题类型',
										showCancel: false
									});
								} else {
									this.list[index].value = res.data;
									this.pickerValueArray = this.list[index].value;
									this.$refs.mpvuePicker.show();
								}
							});
						}
					}else {
						this.pickerValueArray = this.list[index].value;
						this.$refs.mpvuePicker.show();
					}

				}
				this.selectIndex = index;
				this.mode = 'selector';
				this.pickerValueDefault = [0];
			},
			onConfirm(e) {
				this.list[this.selectIndex].selectedLabel = e.label;
				this.list[this.selectIndex].selectedValue = e.value;
				if (
					e.label == '水污染' ||
					e.label == '散乱污' ||
					e.label == '大气污染' ||
					e.label == '噪声污染' ||
					e.label == '废水污染' ||
					e.label == '固废污染' ||
					e.label == '辐射污染' ||
					e.label == '废气污染' ||
					e.label == '生态环境污染' ||
					e.label == '其他污染'
				) {
					this.list.splice(3, 3);
					this.list.splice(4, 3, { title: '问题类型', value: '', selectedLabel: '请选择', selectedValue: '0' });
				} 
				// 				if(e.label == "普通事件" && this.list[1].title === "企业"){//如果是普通事件 删除企业类型  
				// 					this.list.splice(1,1);
				// 				}else if(e.label == "企业事件" && this.list[1].title !== "企业"){
				// 					this.list.splice(1,0,{title:"企业",value:"",selectedLabel:"请选择",selectedValue:"0"})
				// 				}
			},
			bindStartDateChange: function(e) {
				this.dateStart = e.target.value

			},
			bindEndDateChange: function(e) {
				this.dateEnd = e.target.value;
			},
			getEventList() {
				var params = new Object;
				params.startDate = this.dateStart;
				params.endDate = this.dateEnd;
				if (this.userId) {
					params.userId = this.userId;
				}
				for (var i = 0; i < this.list.length; i++) {
					if (this.list[i].selectedValue != '0') {
						if (this.list[i].title === '事件类型') {
							params.eventType = String(this.list[i].selectedValue);
						} else if (this.list[i].title === '企业') {
							params.companyId = String(this.list[i].selectedValue);
						} else if (this.list[i].title === '任务类型') {
							params.taskType = String(this.list[i].selectedValue);
						} else if (this.list[i].title === '涉事对象') {
							params.targets_type = String(this.list[i].selectedValue);
						} else if (this.list[i].title === '问题类型') {
							params.questionType = String(this.list[i].selectedValue);
						}
					}
				}

				this.$http.post('ac/xagrid/appEventStatisticsService/getUserEventStatistics', params).then((res) => {
					this.eventList = res.data;
				})
			},
			radioChangeType(value){
				console.log("选择的日期: " + JSON.stringify(value));
				if(value === 'month'){
					var m = month();
					console.log('月'+ m);
					this.dateStart = m[0];
					this.dateEnd = m[1];
				}else if(value === 'week'){
					var w = week();
					this.dateStart = w[0];
					this.dateEnd = w[1];
				}else if(value === 'today'){
					var t = today();
					this.dateStart = t;
					this.dateEnd = t;
				}else if(value === 'yesterday'){
					var y = yesterday();
					this.dateStart = y;
					this.dateEnd = y;
				}else if(value === 'total'){
					const currentDate = this.getDate({
						format: true
					});
					this.dateStart = '2019-01-01';
					this.dateEnd = currentDate;
				}
			},
			getDate(type){
				const date = new Date();

				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;
			}
		}

	}
</script>

<style>
	.viewBg {
		width: 100%;
		height: 100%;
		/* background-color: #0FAEFF; */
	}

	.cell-detail {
		margin-right: 20upx;
	}

	.uni-list-cell-navigate {
		justify-content: space-between;
	}

	.lineH20 {
		height: 20upx;
		width: 100%;
		background-color: #F7F7F7;
	}

	.lineH1 {

		height: 2upx;
		width: 100%;
		/* margin-left: 10upx; */
		background-color: #F7F7F7;
	}

	.selectDate {
		padding: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.checkBox{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		flex-flow: wrap;
		margin: 20upx;
	}
	button {
		margin: 30upx;
	}
</style>
